// 引入基类接口
import Base from "../base.js";
// 引入放映厅api
import ProjectionHallApi from "../../api/projectionHall.js";
// 引入影院api
import cinemaApi from "../../api/cinemas.js";

// 暴露并创建新增学生视图
export default class extends Base {
    data = {
        cinema: [],
        addDate:{}
    }

    render() {
        this.$el.html(`
        <h1 style="margin:20px auto;width:140px;font-weight:bold;">新增放映厅</h1>
        <form class="layui-form" style="width:513px;flex-flow:wrap;margin:auto;border: groove;padding:50px 100px;>
            <div class="layui-form-item">
                <label class="layui-form-label" style="padding: 9px 0;margin-bottom:25px;">放映厅名称</label>
                <div class="layui-input-block">
                    <input type="test" name="name" required placeholder="请输入放映厅名称" lay-verify="" class="layui-input" style="width: 200px;">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="padding: 9px 0;">选择影院</label>
                <div class="layui-input-block">
                    <select id="cinemaId" lay-verify="required" lay-filter="demo"></select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width:revert;text-align:">是否营业</label>
                <div class="layui-input-block">
                    <input type="radio" name="status" value="true" title="是" lay-filter="ChoiceRadio">
                    <input type="radio" name="status" value="false" title="否" checked lay-filter="ChoiceRadio">
                </div>
            </div>
            <div>
                <div style="width: 114px;margin: auto;">
                    <button id="submit-btn" type="reset" class="layui-btn">立即提交</button>
                </div>
            </div>
        </form>
        
        `)
        const form = layui.form;
        form.render();
        // 获取提交键
        this.$submitBtn = $("#submit-btn");
        //放映厅名
        this.$name = $("input[name=name]");
        console.log(this.$name);
        // 是否营业
        this.$status = $("input[name=status]");
        // 所属影院
        this.$cinemasId = $("#cinemaId");

    }

    // 提交事件
    async submitHandle() {
        const layer = layui.layer, $ = layui.jquery, form = layui.form;
        // 获取放映厅名
        const name = this.$name.val();
        // 获取营业状态
        const status = this.data.addDate[`status`];
        // 获取所属影院
        const cinemasId = this.data.addDate[`cinemaId`];
        // 向数据服务器发送请求
        const data = await ProjectionHallApi.add({ name, status, cinemasId });
        Object.assign(this.data, data);
        // 添加业务处理
        if (data) {
            alert("添加成功！")
            // 添加成功后修改路由路径切换到登录视图
            location.hash = "#/info/projectionHall";
        } else {
            alert("添加失败！！")
        }
    }


    // 绑定事件代理
    handle() {
        // 提交事件
        this.$submitBtn.on("click", this.submitHandle.bind(this));
        this.changeHandel();
        this.radioHandel();
    }


    rerender() {
        // 渲染影院
        this.$cinemasId.html(`${this.data.cinema.map(item => {
            return `<option value="${item._id}">${item.name}</option>`
        }).join("")
            }`)
    }

    async getCinema() {
        // 获取影院数据
        this.data.cinema = await cinemaApi.getData();
        // 重新渲染，将影院数据渲染到页面上
        this.rerender();
    }

    // select事件监听
    changeHandel() {
        const layer = layui.layer, $ = layui.jquery, form = layui.form;
        const that = this;
        form.on('select(demo)', function (e) {
            const cinemaId = e.value;
            that.data.addDate["cinemaId"]=cinemaId;
            // return cinema;
        })
    }

    // 单选框监听事件
    radioHandel(){
        const layer = layui.layer, $ = layui.jquery, form = layui.form;
        const that = this;
        form.on('radio(ChoiceRadio)', function(data){
            const status=data.value;
            that.data.addDate["status"]=status;
          });
    }

    async mounted() {
        await this.getCinema();
        this.rerender();
        const form = layui.form;
        form.render();
    }

}